<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-tab-content">
    <div class="layui-tab-item layui-show" id="rateDiv">

        <div class="layui-tab" id="rateTab" lay-filter="rateTab">
            <ul class="layui-tab-title">
                <li class="layui-this">全部</li>
                <li>待审核</li>
                <li>通过</li>
                <li>拒绝</li>
            </ul>
        </div>


        <div class="layui-form-item layui-form-text">
            <div class="layui-input-inline" style="width: 300px;margin-right: 10px">
                <input type="text" id="rateShopName" placeholder="店铺名称" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button type="submit" class="layui-btn" id="rateSearch">搜索</button>
            </div>
            <div style="margin-right: 100px;float: right;" id="batch">
                <div class="layui-input-inline" id="batchAdopt">
                    <button type="submit" class="layui-btn layui-btn-normal" id="batchAdoptBtn">批量通过</button>
                </div>
                <div class="layui-input-inline" id="batchRefuse">
                    <button type="submit" class="layui-btn layui-btn-danger" id="batchRefuseBtn">批量拒绝</button>
                </div>
            </div>

        </div>


        <table class="layui-hide" lay-filter="rateTable" id="rateTable"></table>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script th:inline="javascript">
    layui.use(['element', 'form', 'table', 'form', 'jquery'], function () {
        var form = layui.form;
        var element = layui.element;
        var table = layui.table;
        var $ = layui.jquery;
        var status;
        table.render({
            elem: '#rateTable'
            , id: 'rateTable'
            , url: '/rate'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type: 'checkbox'}
                , {field: 'shopName', title: '店铺名称', align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'rateContent', width: '30%', title: '内容', align: 'center'}
                , {field: 'rateDate', title: '时间', align: 'center'}
                , {field: 'rateScore', title: '评分', align: 'center'}
                , {field: 'userName', title: '发起人', align: 'center'}
                , {
                    field: 'status', title: '状态', align: 'center', templet: function (d) {
                        var str = '';
                        var status = d.status;
                        if (status == 0) {
                            str = "<div>待审核</div>"
                        } else if (status == 1) {
                            str = "<div>通过</div>"
                        } else if (status == 2) {
                            str = "<div>拒绝</div>"
                        }
                        return str;
                    }
                }
                , {
                    title: '操作', align: 'center', templet: function (d) {
                        var str = '';
                        if (d.status == 0) {
                            str = "<a class=\"layui-btn layui-btn-xs\" lay-event=\"adoptBtn\">通过</a>\n" +
                                "    <a class=\"layui-btn layui-btn-xs layui-btn-danger\" lay-event=\"refuseBtn\">拒绝</a>"
                        } else if (d.status == 1) {
                            str = "<a class=\"layui-btn layui-btn-xs layui-btn-danger\" lay-event=\"refuseBtn\">拒绝</a>"
                        } else if (d.status == 2) {
                            str = "<a class=\"layui-btn layui-btn-xs\" lay-event=\"adoptBtn\">通过</a>\n"
                        }
                        return str;
                    }
                }
            ]]
            , page: true
        });

        table.on('tool(rateTable)', function (obj) {
            console.log(obj.data)
            if (obj.event === 'adoptBtn') {
                updateRateStatus(obj.data.rateId, 1, obj.data.shopId)
            } else if (obj.event === 'refuseBtn') {
                updateRateStatus(obj.data.rateId, 2, obj.data.shopId)
            }
        })

        $('#batchAdoptBtn').click(function () {
            batch(1)
        })
        $('#batchRefuseBtn').click(function () {
            batch(2)
        })

        function batch(rateStatus) {
            var checkStatus = table.checkStatus('rateTable'); //idTest 即为基础参数 id 对应的值
            var rateIds = new Array();
            var shopIds = new Array();
            for (let i = 0; i < checkStatus.data.length; i++) {
                rateIds.push(checkStatus.data[i].rateId);
                shopIds.push(checkStatus.data[i].shopId);
            }
            $.ajax({
                url: '/rate/batch',
                method: 'Post',
                data: {
                    rateIds: rateIds,
                    shopIds: shopIds,
                    status: rateStatus
                },
                traditional: true,//防止深度序列化
                // cache: false,
                // async: false,
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        table.reload('rateTable', {where: {status: status}})
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            })
        }

        function updateRateStatus(rateId, rateStatus, shopId) {
            layer.load(2);
            $.ajax({
                url: '/rate/',
                method: 'Post',
                data: {
                    rateId: rateId,
                    status: rateStatus,
                    shopId: shopId
                },
                success: function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        table.reload('rateTable', {where: {status: status}})
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            })
        }

        //搜索
        $('#rateSearch').click(function () {
            var shopName = $('#rateShopName').val();
            table.reload('rateTable', {where: {shopName: shopName}})
        })


        element.on('tab(rateTab)', function (data) {
            console.log(data)
            if (data.index == 0) {
                $('#batchAdopt').show()
                $('#batchRefuse').show()
                status = null;
            } else if (data.index == 1) {
                $('#batchAdopt').show()
                $('#batchRefuse').show()
                status = 0;
            } else if (data.index == 2) {
                $('#batchAdopt').hide()
                $('#batchRefuse').show()
                status = 1;
            } else if (data.index == 3) {
                $('#batchAdopt').show()
                $('#batchRefuse').hide()
                status = 2;
            }
            table.reload('rateTable', {where: {status: status}})
        });


    })
</script>
</body>
</html>
